<template>
  <div class="container">
    <el-card id="home-card" shadow="never">
      <export-excel :products="products" />
      <add-dialog @update_data="request_products" />
    </el-card>
    <product-table class="product_table" @update_data="request_products" :products="products" />
  </div>
</template>
<script>
import ProductTable from '@/components/home/ProductTable.vue'
import AddDialog from '@/components/home/AddDialog.vue'
import ExportExcel from '@/components/home/ExportExcel.vue'
export default {
  components: {
    ProductTable,
    AddDialog,
    ExportExcel,
  },
  data() {
    return {
      products: [],
    }
  },
  mounted() {
    this.request_products()
  },
  methods: {
    request_products() {
      this.$http
        .get('/product')
        .then(res => {
          this.products = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
  },
}
</script>

<style scoped>
#home-card {
  width: 80%;
  margin: 1vh auto;
  display: flex;
  justify-content: flex-end;
}
</style>
